<template>
	<view class="content">
		<input type="text" placeholder="请输入内容" v-model="inputValue" />
		<button type="default" @click="addItem">添加</button>
	</view>
	<view class="g-list">
		<view class="m-item" v-for="item,index in list" :key="index">
			{{index}} - {{item}} <text @click="onDelete(index)">删除</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	const inputValue = ref('')
	let list = ref(['javascript'])
	
	/**
	 * 添加
	 */
	const addItem = ()=>{
		list.value.push(inputValue.value)
		inputValue.value = ''
	}
	/**
	 * 删除
	 *  slice splice
	 */
	const onDelete = (index)=>{
		list.value.splice(index,1)
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		padding: 10px;
		input{
			flex: 1;
			border: 1px solid yellowgreen;
			height: 40px;
		}
		button{
			width: 100px;
		}
	}
</style>
